<template>
    <div class="app-container">
        <!-- 表格-条件筛区域  -->
        <div class="filter-container">
            <!--<el-input v-model="searchParam.SEARCH_LIKE_name" placeholder="请输入关键字" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>-->
            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit"
                       @click="handleCreate">新增
            </el-button>
        </div>

        <!-- 表格-内容区域 -->
        <el-table :key="tableKey" v-loading="listLoading" :data="tableList" border fit highlight-current-row
                  height="250px" style="width: 100%;">
            <el-table-column
                v-for="column in columns"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                :width="column.width"
                :align="column.align?column.align:'center'"
                :min-width="column.minWidth"
                :sortable="column.sortable"
                :fixed="column.fixed"
                :type="column.type"
                :formatter="column.formatter"
            >
                <template slot-scope="scope">
                    <img v-if="column.imgFlag==true" :src="CMBASE.baseFileContext + scope.row[column.prop]" width="60"
                         height="60" class="img">
                    <!-- 行内显示开关按钮 -->
                    <el-switch v-else-if="column.switchFlag==true" v-model="scope.row[column.prop]" :active-value="1"
                               :inactive-value="0" disabled/>
                    <span v-else-if="column.formatter"> {{ column.formatter(scope.row) }}</span>
                    <span v-else>{{ scope.row[column.prop] }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button type="info" size="mini" @click="handleShowAttrvalueList(scope.row)">值列表</el-button>
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表格-页脚区域 -->
        <pagination v-show="tableTotal>0" :total="tableTotal" :page.sync="pageRequest.pageNum"
                    :limit.sync="pageRequest.pageSize" @pagination="getList"/>

        <!--新增编辑界面-->
        <el-dialog :title="operation?'新增':'编辑'" width="45%" top="15vh" :modal="false" :visible.sync="dialogFormVisible"
                   :close-on-click-modal="false">
            <div style="" v-if="dialogFormVisible">
                <el-form ref="dataForm" :model="dataForm" label-width="140px" :rules="dataFormRules" style="width: 80%">
                    <el-form-item label="分类" prop="classifyId">
                        <el-cascader ref="classCascader" v-model="dataForm.classifyId" :options="goodClass"
                                     :props="props" collapse-tags clearable separator=" "
                                     @change="handleFilterChangeType" :disabled="true"/>
                    </el-form-item>
                    <el-form-item label="规格名称" prop="attrName">
                        <el-input v-model="dataForm.attrName" auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="是否可用" prop="state">
                        <el-switch
                            v-model="dataForm.state"
                            :active-value="1"
                            :inactive-value="0"
                        />
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="dataForm.remark" auto-complete="off"/>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click.native="closeDialog()">取消</el-button>
                <el-button size="mini" :loading="editLoading" type="primary" @click.native="saveFormData()">提交
                </el-button>
            </div>
        </el-dialog>

        <el-dialog title="规格值列表" width="60%" top="10vh" :modal-append-to-body="false" :modal="false"
                   :visible.sync="valueListDialogFormVisible" :close-on-click-modal="false" :destroy-on-close="true">
            <!-- 弹框el用的是异步更新 弹框内最外层使用v-if 重新渲染-->
            <div v-if="valueListDialogFormVisible" style="height:430px">
                <attrValue ref="attrValue" :rowId="rowId" :rowKeyName="rowKeyName"></attrValue>
            </div>
        </el-dialog>

    </div>
</template>
<script>
    import Vue from 'vue'
    import baseData from '@/mixin/base-data'
    import address from '@/mixin/address'
    import {getMAttrKeyList, saveMAttrKeyInfo, deleteMAttrKeyInfo, getClassifyList} from '@/api/modules/goodsInfo'
    import attrValue from '../goodsattr/attrValue'

    export default {
        name: 'ProductBrand',
        components: {
            attrValue
        },
        props: {
            rowClassifyId: {
                type: [String],
                default: ''
            }
        },
        directives: {},
        filters: {},
        mixins: [baseData, address],
        data() {
            return {
                tableKey: 0,
                tableList: [], // 表格数据源
                tableTotal: 0, // 表格总条数数据
                listLoading: true,
                pageRequest: {pageNum: 1, pageSize: 10},
                searchParam: {SEARCH_LIKE_attr_name: '', SEARCH_LIKE_classify_id: ''},
                dialogFormVisible: false, // 默认不显示弹出框
                valueListDialogFormVisible: false, // 默认不显示弹出框
                operation: true, // true:新增, false:编辑
                editLoading: false, // 保存表单时loading框
                columns: [
                    // { prop: 'id', label: '', sortable: false },
                    // { prop: 'classifyName', label: '分类', sortable: false },
                    {prop: 'attrName', label: '规格名称', sortable: false},
                    {prop: 'state', label: '是否可用', sortable: false, switchFlag: true},
                    // { prop: 'remark', label: '备注', sortable: false }
                ],
                fileList: [],
                goodClass: [],
                // 新增编辑界面数据
                dataForm: {
                    id: '',
                    classifyId: '',
                    attrName: '',
                    state: '',
                    remark: '',
                    createTime: '',
                    createUser: '',
                    updateTime: '',
                    updateUser: ''
                },
                // 表单检验规则
                dataFormRules: {
                    // id: [{ required: true, message: '请输入', trigger: 'blur' }],
                    classifyId: [{required: true, message: '请选择分类', trigger: 'blur'}],
                    attrName: [{required: true, message: '请输入规格名称', trigger: 'blur'}],
                    state: [{required: true, message: '请输入是否可用', trigger: 'blur'}],
                    remark: [{required: false, message: '请输入备注', trigger: 'blur'}]
                },
                props: {
                    multiple: false, // 是否多选
                    label: 'name',
                    value: 'id',
                    children: 'children'
                },
                rowId: undefined,
                rowKeyName: undefined
            }
        },
        created() {
            this.getList()
            this.getGoodsClasslist()
        },
        methods: {
            async getList() {
                this.listLoading = true
                // 【API请求】----获取用户列表数据
                Vue.set(this.searchParam, 'SEARCH_LIKE_classify_id', this.rowClassifyId)
                this.pageRequest.searchParam = this.searchParam
                const res = await getMAttrKeyList(this.pageRequest)
                try {
                    if (res.code === 0) {
                        const content = res.result.content
                        const total = res.result.total
                        this.tableList = content
                        this.tableTotal = total
                    }
                    this.listLoading = false
                } catch (e) {
                    this.listLoading = false
                    throw e
                }
            },
            // 获取表格数据
            // 表格数据筛选
            handleFilter() {
                this.pageRequest.searchParam = this.searchParam
                this.getList()
            },
            // 【按钮点击】--- 弹出新增表单
            handleCreate() {
                this.operation = true
                this.initDataForm()
                this.dataForm.classifyId = this.rowClassifyId
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                    this.editLoading = false
                })
            },
            // 【按钮点击】--- 弹出编辑表单
            handleUpdate(row) {
                this.operation = false
                this.dataForm = Object.assign({}, row)
                // 显示编辑菜单
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                    this.editLoading = false
                })
            },
            // 【按钮点击】--- 弹出值列表表单
            handleShowAttrvalueList(row) {
                this.rowId = row.id
                this.rowKeyName = row.attrName
                // 显示编辑菜单
                this.valueListDialogFormVisible = true
            },
            // 保存表单数据
            saveFormData() {
                let res
                this.$refs['dataForm'].validate(async (valid) => {
                    if (!valid) {
                        return false
                    }
                    this.editLoading = true
                    res = await saveMAttrKeyInfo(this.dataForm)
                    try {
                        if (res.code === 0) {
                            this.dialogFormVisible = false// 关闭表单页面
                            this.initDataForm()// 重置表单数据
                            this.getList()// 重新获取表格数据
                            this.$notify({title: '成功', message: '保存成功', type: 'success', duration: 2000})
                        }
                        this.editLoading = false// 关闭loading框
                    } catch (e) {
                        throw e
                    }
                })
            },
            // 【按钮点击】---删除行
            handleDelete(row) {
                this.$confirm('确认删除该记录吗？', '提示', {}).then(async () => {
                    // 【API请求】---- 删除数据
                    const {id} = row
                    const res = await deleteMAttrKeyInfo({ids: id})
                    try {
                        if (res.code === 0) {
                            this.getList()
                            this.$message({message: '操作成功', type: 'success'})
                        }
                    } catch (e) {
                        throw e
                    }
                })
            },
            // 初始化表单数据，重新渲染
            initDataForm() {
                Object.assign(this.$data.dataForm, this.$options.data().dataForm)
            },
            // 关闭表单弹出框
            closeDialog() {
                this.$refs['dataForm'].resetFields()
                this.dialogFormVisible = false
            },
            /**
             * 获取商品分类
             */
            async getGoodsClasslist() {
                const {data} = await getClassifyList({type: null})
                console.log(data)
                if (data) {
                    this.goodClass = this.formatData(data)
                }
            },
            // 商品类型
            handleFilterChangeType(value) {
                console.log(value)
                this.dataForm.classifyId = value[value.length - 1]
                const classLabel = this.$refs['classCascader'].getCheckedNodes()[0].pathLabels
                this.dataForm.classifyName = classLabel[classLabel.length - 1]
            }
        }
    }
</script>
